<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>帐单列表</title>
    <link rel="icon" th:href="@{/resources/favicon.ico}">
    <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/css/public.css}" media="all"/>
</head>
<body>
<h1 align="center">帐单列表</h1>
<!-- 查询条件开始 -->
<div style="text-align: center;">
    <form id="serachFrm" method="post" class="layui-form  layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">帐单类型</label>
                <div class="layui-input-inline">
                    <select name="typeid" id="search_typeid">
                        <option value="0">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">开始日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="startDate" id="startDate" readonly="readonly" placeholder="yyyy-MM-dd"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">结束日期</label>
                <div class="layui-input-inline">
                    <input type="tel" name="endDate" id="endDate" readonly="readonly" placeholder="yyyy-MM-dd"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="doSerach">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <button type="button" class="layui-btn layui-btn-warm" id="doAdd">添加</button>
            </div>
        </div>
    </form>
</div>
<!-- 查询条件结束-->

<!-- 数据表格开始 -->
<div>
    <table class="layui-hide" id="billTable" lay-filter="billTable"></table>
</div>
<!-- 数据表格结束 -->

<!-- 添加账单的弹出层开始 -->
<div id="addBillDiv" style="display: none;margin: 10px">
    <form id="dataFrm" method="post" lay-filter="dataFrm" class="layui-form  layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">帐单类型</label>
            <div class="layui-input-block" id="billTypeDiv">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">帐单标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" placeholder="请输入账单标题" lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <!--            <div class="layui-inline">-->
            <!--                <label class="layui-form-label">账单时间</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" name="billtime" id="billtime" readonly="readonly" placeholder="yyyy-MM-dd"-->
            <!--                           autocomplete="off" class="layui-input">-->
            <!--                </div>-->
            <!--            </div>-->
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">帐单金额</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" lay-verify="number" placeholder="请输入账单金额" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">帐单备注</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入帐单备注" name="remark" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>
<!-- 添加账单的弹出层结束-->


<script type="text/javascript" th:src="@{/resources/layui/layui.js}"></script>

<script type="text/javascript">
    layui.use(['form', 'jquery', 'layer', 'laydate', 'table'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var table = layui.table;
        //渲染时间选择
        laydate.render({
            elem: '#startDate'
        })
        laydate.render({
            elem: '#endDate'
        });
        laydate.render({
            elem: '#billtime',
            type: 'datetime'
        });

        //加载table的数据
        var tableIns = table.render({
            elem: '#billTable'
            , url: '/bills/loadAllBills'
            , toolbar: true //开启头部工具栏，并为其绑定左侧模板
            , title: '帐单数据列表'
            , page: true
            , cols: [ [
                {field: 'id', title: 'ID', align: 'center'}
                , {field: 'title', title: '账单标题', align: 'center'}
                , {field: 'billtime', title: '记账时间', align: 'center'}
                /*  ,{field:'typeid', title:'类型ID ', align: 'center'} */
                , {field: 'typeName', title: '类型名称 ', align: 'center'}
                , {field: 'price', title: '账单金额', align: 'center'}
                , {field: 'remark', title: '账单备注', align: 'center'}
            ] ]
            , done: function (data, curr, count) {
                //不是第一页时如果当前返回的的数据为0那么就返回上一页
                if (data.data.length == 0 && count != 1 && couunt != 0) {
                    tableIns.reload({
                        page: {curr: curr = 1}
                    });
                }
            }

        });

        //初始化查询条件的下拉列表
        $.get("/billtype/loadAllBillType", function (objs) {
            var types = objs.data;
            var search_typeid = $("#search_typeid");
            $.each(types, function (index, item) {
                search_typeid.append("<option value=" + item.id + ">" + item.name + "</option>");
            });
            //重新渲染下拉列表
            form.render("select");
        });

        //模糊查询
        form.on("submit(doSerach)", function (data) {
            tableIns.reload({
                url: '/bills/loadAllBills',
                where: data.field,
                page: {
                    curr: 1
                }
            })
            return false;
        });


        var mainIndex;
        //打开添加的弹出层
        $("#doAdd").on("click", function () {
            mainIndex = layer.open({
                type: 1,
                content: $("#addBillDiv"),
                area: ['800px', '500px'],
                success: function () {
                    var div = $("#billTypeDiv");
                    $("#dataFrm")[0].reset();//清空表单
                    div.html("");
                    $.get("/billtype/loadAllBillType", function (objs) {
                        var types = objs.data;
                        $.each(types, function (index, item) {
                            if (index == 0) {
                                div.append('<input type="radio" checked="" name="typeid"  value="' + item.id + '" title="' + item.name + '">');
                            } else {
                                div.append('<input type="radio" name="typeid" value="' + item.id + '" title="' + item.name + '">');
                            }
                        });
                        //重新渲染单选框
                        form.render("radio");
                    });
                    initBillDate();
                }
            });
        });

        //监控提交事件
        form.on("submit(doSubmit)", function (data) {
            $.post("/bills/addBills", data.field, function (res) {
                layer.msg(res.msg);
                if (res.code == 200) {
                    layer.confirm('是否继续录入？', {
                        btn: ['继续', '取消'] //按钮
                    }, function (index) {
                        $("#dataFrm")[0].reset();
                        layer.close(index);
                        //设置默认时间
                        // initBillDate();
                    }, function () {
                        layer.close(mainIndex);
                    });
                }
                tableIns.reload();
            });
            return false;
        });

        function initBillDate() {
            var data = new Date();
            form.val("dataFrm", {billtime: (data.getFullYear() + "-" + (data.getMonth() + 1) + "-" + data.getDate() +
                    " " + data.getHours() + ":" + data.getMinutes() + ":" + data.getSeconds())});
        }
    })
</script>

</body>
</html>